<template>
  <div class="choiceGoods">
    <a-modal :title="dialogVisibleTile" v-model="dialogVisible" width="780px">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :labelWidth="labelWidth" class="demo-ruleForm">
        <el-row :gutter="10">
          <el-col :xs="24" :sm="24">
            <el-form-item label="商品分类：" prop="spfl">
              <a-cascader
                :options="categoryIdList"
                v-model="ruleForm.pid"
                change-on-select
                @change="categoryIdChange"
                placeholder="请选择商品分类"
              ></a-cascader>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24">
            <el-form-item label="商品名称：" prop="goodsName">
              <a-input-search v-model="ruleForm.goodsName" placeholder="请输入商品名称" @search="onSearch" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" style="text-align: center">
            <!-- <a-transfer
              style="text-align: left; display: inline-block"
              v-model="ruleForm.chioseVal"
              :titles="['全选商品', '已选商品']"
              :list-style="{
                width: '300px',
                height: '300px',
              }"
              @change="chioseGoods"
              :target-keys="targetKeys"
              :render="item => `${item.title}`"
              :data-source="mockData"
            ></a-transfer>-->
            <el-transfer
              style="text-align: left; display: inline-block"
              :titles="['全选商品', '已选商品']"
              @change="chioseGoods"
              v-model="ruleForm.chioseVal"
              :format="{
                noChecked: '${total}',
                hasChecked: '${checked}/${total}',
              }"
              :data="dataList"
            ></el-transfer>
            <a-pagination
              show-quick-jumper
              v-model="page.current"
              :page-size-options="['10', '20', '30', '40', '50']"
              :total="page.total"
              :page-size.sync="page.size"
              @showSizeChange="onShowSizeChange"
              @change="onShowSizeChange"
              style="text-align: left; margin: 10px 10px 0 65px"
              size="small"
            />
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <a-button @click="handleClose">取 消</a-button>
        <a-button type="primary" @click="handleSure()" :loading="loading">确 定</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { shopgoodscategory, platformgoodsinfo, shopGoodsInfoList, shopGoodsInfoPage } from '@/api/shop/stock/instock.js'
export default {
  data() {
    return {
      dialogVisible: false,
      dialogVisibleTile: '',
      loading: false,
      labelWidth: '120px',
      rules: {
        lmmc: [
          {
            required: true,
            message: '请输入分组名称，不超过15个字',
            trigger: 'blur',
          },
        ],
      },
      categoryIdList: [],
      ruleForm: {
        chioseVal: [],
        chioseGoods: [],
      },
      dataVal: [],
      spflList: [],
      dataList: [],
      page: {
        total: 0,
        size: 100,
        current: 1,
      },
    }
  },
  // mounted() {
  //   this.getList()
  // },
  methods: {
    getList() {
      shopgoodscategory({ businessType: '' }).then((val) => {
        //商品类目
        let data = val.data
        console.log(data)
        this.categoryIdList = data.map((item) => {
          return {
            value: item.categoryId,
            label: item.categoryName,
            children: item.children.map((items) => {
              return {
                value: items.categoryId,
                label: items.categoryName,
              }
            }),
          }
        })
      })
      this.getGoods({ categoryId: '',goodsSource:'00'})  //商品来源：00表示门店自建

      shopGoodsInfoList({ categoryId: '',goodsSource:'00'}).then((val) => {
        this.dataVal = val.data.records
      })
    },
    onShowSizeChange(current) {
      this.page.current = current
      this.getGoods({ categoryId: this.ruleForm.categoryId, goodsSource: '00' })
    },
    getGoods(obj) {
      console.log(this.$store.getters.userInfo)
      obj.goodsSource = '00'
      shopGoodsInfoPage(Object.assign(obj, this.page)).then((val) => {
        this.page = {
          total: val.data.total,
          size: val.data.size,
          current: val.data.current,
        }
        let data = val.data.records
        this.dataList = data.map((item) => {
          return {
            key: item.goodsId,
            label: item.goodsName,
          }
        })

        if (this.$parent.$parent.dataList[0].shopInStockNewAddGoodsDetail.length) {
          //点击弹出框回显数据
          this.$parent.$parent.dataList[0].shopInStockNewAddGoodsDetail.forEach((item) => {
            this.ruleForm.chioseVal.push(item.goodsId)
            this.chioseGoods(this.ruleForm.chioseVal)
          })
        }
      })
    },
    handleSure() {
      console.log(this.ruleForm)
      this.$emit('trigger', this.ruleForm)
      this.handleClose()
    },
    handleClose() {
      this.dialogVisible = false
    },
    chioseGoods(e) {
      this.ruleForm.chioseGoods = []
      e.forEach((item) => {
        this.dataVal.forEach((items) => {
          if (items.goodsId == item) {
            this.ruleForm.chioseGoods.push(items)
          }
        })
      })
    },
    onSearch() {
      this.getGoods(this.ruleForm)
    },
    categoryIdChange(e) {
      if (e.length > 1) {
        this.ruleForm.categoryId = e[1]
      } else {
        this.ruleForm.categoryId = e[0]
      }
      ;(this.page = {
        total: 0,
        size: 10,
        current: 1,
      }),
        this.getGoods({ categoryId: this.ruleForm.categoryId, goodsSource: '00' })
    },
  },
}
</script>

<style>
</style>